<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>投票列表</title>
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="/user/js/login.js"></script>
	<script src="/vcode/js/vcode.js"></script>
	<script src="/js/vote.js"></script>
</head>
<body>
<div id="app">
	<vote ref="vt" @change="query">
	<div id="vote" class="wrap">
		<div style="display: flex; justify-content: space-between; align-items: center">
			<h2>投票列表</h2>
			<div>
				排序:
				<el-button :class="
					{'el-icon-bottom': sort == 'timeDesc',
				     'el-icon-top': sort == 'timeAsc'}"
					@click="sort= sort=='timeAsc'?'timeDesc':'timeAsc';query($refs.vt.vname)">开始时间</el-button>
				<el-button :class="
					{'el-icon-bottom': sort == 'userDes',
				     'el-icon-top': sort == 'userAsc'}">参与人数</el-button>
			</div>
		</div>
		<ul class="list">
			<li v-for="v,i in votes.records" :class="{odd:i%2==0}" >
				<h4 style="display: flex; justify-content: space-between; align-items: center">
					<a :href="'view.html?id=' + v.id">{{v.vname}}</a>
					<span v-if="v.zan">
						{{v.zan == 1 ? "赞" : "踩"}}
					</span>
					<time>{{v.startDate}}</time>
				</h4>
				<div class="join"><a :href="'vote.html?id=' + v.id">我要参与</a></div>
				<p class="info">共有 {{v.items.length}} 个选项，已有 {{v.userCnt}} 个网友参与了投票。</p>
			</li>
		</ul>
		<el-pagination background layout="sizes, prev, pager, next, ->, total"
				:total="votes.total" :page-size="size"
				:page-sizes="[3,5,10,20]" @current-change="queryPage"
				@size-change="resetSize" :current-page="page">
		</el-pagination>
	</div>
	</vote>
</div>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			votes:{records:[], total:0},
			page: 1,
			size: 5,
			sort: "" // timeAsc or timeDesc or userAsc or userDesc
		},
		created(){
			this.query();
		},
		methods:{
			query(vname){
				let p = {params:{
						page: this.page,
						size: this.size,
						sort: this.sort
					}}
				if(vname){
					p.params.vname= vname;
				}
				axios.get("/vote/tpVote/query", p).then(res=>{
					this.votes = res.data;
				});
			},
			queryPage(page){
				this.page = page;
				this.query(this.$refs.vt.vname);
			},
			resetSize(size){
				this.size = size;
				this.page = 1;
				this.query(this.$refs.vt.vname);
			}
		}
	})
</script>
</body>
</html>
